<template>
  <div class="user">
    <el-button
      type="btn"
      @click="
        dialogVisible = true;
        isEdit = false;">添加用户</el-button>
    <div class="form">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form" :model="userForm" label-width="80px">
          <el-form-item label="用户名" v-if="!isEdit">
            <el-input v-model="userForm.username"> </el-input>
          </el-form-item>
          <el-form-item label="密码" v-if="!isEdit">
            <el-input v-model="userForm.password"> </el-input>
          </el-form-item>
          <el-form-item label="新密码" v-else>
            <el-input v-model="newPassword"> </el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="comfirmPassword"> </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="onSubmit()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="userTable">
      <el-table :data="userList" border style="width: 100%">
        <el-table-column label="序号" width="300" type="index">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="300">
        </el-table-column>
        <el-table-column prop="password" label="密码" width="300">
        </el-table-column>
        <el-table-column label="操作" width="330">
          <template slot-scope="scope">
            <el-button
              @click="updateUser(scope.row.id, scope.row.password)"
              type="text"
              size="small">更改密码</el-button>
            <el-button
              type="text"
              size="small"
              @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  data() {
    return {
      dialogVisible: false,
      isEdit: false,
      id: 0,
      newPassword: "",
      comfirmPassword: "",
      userForm: {
        username: "",
        password: "",
      },
      userList: [],
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.isEdit = false;
        })
        .catch(() => {});
    },
    handleClick(row) {
      console.log(row);
    },
    //获取用户
    getUserList() {
      request.get("user").then((res) => {
        if (res.data.code === 20000) {
          this.userList = res.data.data;
        } else {
          this.$message.error("获取用户列表错误");
        }
      });
    },
    //增加用户
    onSubmit() {
      if (!this.isEdit) {
        if (this.userForm.password === this.comfirmPassword) {
          request
            .post("/user", {
              username: this.userForm.username,
              password: this.userForm.password,
            })
            .then((res) => {
              if (res.data.code === 20000) {
                this.getUserList();
                this.dialogVisible = false;
              } else {
                this.$message.error("添加用户错误");
                this.dialogVisible = false;
              }
            });
        } else {
          this.$message.error("请确保两次输入密码一致");
        }
      } else {
        if (this.newPassword === this.comfirmPassword) {
          request
            .put(`/user/${this.id}`, {
              password: this.newPassword,
            })
            .then((res) => {
              if (res.data.code === 20000) {
                this.getUserList();
                this.comfirmPassword = "";
                this.newPassword = "";
                this.dialogVisible = false;
              } else {
                this.$message.error("修改密码失败");
                this.dialogVisible = true;
              }
            });
        } else {
          this.$message.error("请确保两次输入密码一致");
        }
      }
    },
    //删除用户
    deleteUser(id) {
      request.delete(`user/${id}`).then((res) => {
        if (res.data.code === 20000) {
          this.getUserList();
        } else {
          this.$message.error("删除错误");
        }
      });
    },
    //修改密码
    updateUser(id) {
      this.id = id;
      this.isEdit = true;
      this.dialogVisible = true;
    },
  },
  watch: {
    isEdit() {
      if (!this.isEdit) {
        this.comfirmPassword = "";
        this.newPassword = "";
      }
    },
  },
  mounted() {
    this.getUserList();
  },
};
</script>